<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="存钱计划"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </header>
    <div class="content">
      <!-- 整体 -->
      <div class="contents">
        <!-- 计划们 -->
        <div class="Plans">
          <!-- 单个计划 -->
          <div class="SinglePlans" v-for="item in plans" :key="item.id">
            <!-- 定位到左上角的显示当前计划状态的显示框 -->
            <span class="State" v-if="item.VoidOrNot === 1" style="background: green;">
              正在进行
            </span>
            <span class="State" v-else style="background: red;">
              该计划已作废
            </span>
            <!-- 定位到右上角的设置按钮 -->
            <div class="del">
              <van-icon name="setting" size=".20rem" color="#2f2f35" @click="SetUpPlanFn(item.id)"/>
            </div>
            <!-- 点击设置从下方弹出的设置框 -->
            <van-popup v-model="SetUpTxt" round position="bottom" :style="{ height: '37%'}">
              <van-uploader :after-read="SetUpPhotographFn" capture="camera" preview-size=".30rem">
                <van-button type="primary">
                  <span style="color: #000000;">
                    拍照
                  </span>
                </van-button>
              </van-uploader>
              <van-uploader :after-read="SetUpalbumFn" preview-size=".30rem">
                <van-button type="primary">
                  <span style="color: #000000;">
                    上传文件
                  </span>
                </van-button>
              </van-uploader>
              <van-button type="primary" size="large" style="margin-top:.05rem;border-radius:.10rem;" color="#ffffff"  @click="SetUpDelFn(item.id)">
                <span style="color: black;height: 2.0rem;">
                  删除
                </span>
              </van-button>
              <van-button type="primary" size="large" style="margin-top:.05rem;border-radius:.10rem;" color="#ffffff"  @click="SetUpEditFn(item.id)">
                <span style="color: black;height: 2.0rem;">
                  编辑
                </span>
              </van-button>
              <van-button type="primary" size="large" style="margin-top:.05rem;border-radius:.10rem;" color="#ffffff"  @click="SetUpCancelFn">
                <span style="color: black;">
                  取消
                </span>
              </van-button>
            </van-popup>
            <!-- 修改目标计划弹出层 -->
            <van-popup v-model="targetTxt" class="target">
              <p style="margin-bottom:.3rem;">
                编辑目标
              </p>
              <input v-model="targetvalue" type="text" placeholder="请输入目标值" class="targetiup">
              <div class="targetBut">
                <van-button type="default" class="targetCancel" @click="targetCloseFn">
                  取消
                </van-button>
                <van-button type="default" class="targetDetermine" @click="targetObtainFn">
                  确定
                </van-button>
              </div>
            </van-popup>
            <!-- 上方图片 -->
            <div class="img">
              <img :src=item.img alt="">
            </div>
            <!-- 下方文本 -->
            <div class="txt">
              <!-- 左边已存款 -->
              <div class="Deposited">
                已存款
                <p>{{ item.Deposited }}.00</p>
              </div>
              <!-- 右边目标 -->
              <div class="target">
                目标
                <p>{{ item.target }}.00</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 添加计划按钮 -->
        <div class="addplan">
          <van-button type="primary" size="large" color="#ffffff" @click="AddPlanFn">
            <span style="color: #000000;font-size: .15rem;">
              +添加计划
            </span>
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar, Button, Icon, Popup, Uploader, Dialog } from 'vant'
Vue.use(NavBar)
Vue.use(Button)
Vue.use(Icon)
Vue.use(Popup)
Vue.use(Uploader)
Vue.use(Dialog)
export default {
  // 设置data初始值
  data () {
    return {
      plans: [
        {
          id: 1,
          img: require('../../lib/img/my_SavingPlan/plan.png'), // 图片
          Deposited: 1000, // 已存款
          target: 20000, // 目标
          VoidOrNot: 0 // 计划是否已作废,0表示作废,1表示正在进行
        },
        {
          id: 2,
          img: require('../../lib/img/my_SavingPlan/plan.png'), // 图片
          Deposited: 1000, // 已存款
          target: 20000, // 目标
          VoidOrNot: 1 // 计划是否已作废,0表示作废,1表示正在进行
        },
        {
          id: 3,
          img: require('../../lib/img/my_SavingPlan/plan.png'), // 图片
          Deposited: 1000, // 已存款
          target: 20000, // 目标
          VoidOrNot: 0 // 计划是否已作废,0表示作废,1表示正在进行
        },
        {
          id: 4,
          img: require('../../lib/img/my_SavingPlan/plan.png'), // 图片
          Deposited: 1000, // 已存款
          target: 20000, // 目标
          VoidOrNot: 0 // 计划是否已作废,0表示作废,1表示正在进行
        }
      ],
      SetUpTxt: false, // 点击设置按钮弹出来的选项框
      targetTxt: false, // 修改目标值弹出层
      targetvalue: '' // 目标值框value
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {},
  // 计算属性
  methods: {
    // 设置按钮
    SetUpPlanFn (id) {
      this.SetUpTxt = true
    },
    // 设置选项框中拍照选项
    SetUpPhotographFn (file) {
      this.SetUpTxt = false
    },
    // 设置选项框中相册中选择选项
    SetUpalbumFn (file) {
      this.SetUpTxt = false
    },
    // 编辑计划
    SetUpEditFn (id) {
      this.SetUpTxt = false
      this.targetTxt = true
    },
    // 编辑目标值弹出层取消
    targetCloseFn () {
      this.targetTxt = false
    },
    // 编辑目标值弹出层确定
    targetObtainFn () {
      // console.log(this.targetvalue)
      this.targetTxt = false
    },
    // 删除计划
    SetUpDelFn (id) {
      Dialog.confirm({
        title: '删除',
        message: '确认删除该计划?'
      }).then(() => {
        // on confirm
        this.SetUpTxt = false
      }).catch(() => {
        // on cancel
        this.SetUpTxt = false
      })
    },
    // 设置选项中取消按钮
    SetUpCancelFn () {
      this.SetUpTxt = false
    },
    // 添加计划按钮
    AddPlanFn () {}
  }
}
</script>

<style lang="scss" scoped>
// 样式
  // nav-bar导航栏
  /deep/ .van-nav-bar {
    height: .6rem;
    line-height: 0.6rem;
    text-align: center;
    background-color: #FDD949;
    user-select: none;
    // 通知栏左侧箭头
    /deep/ .van-icon-arrow-left {
      color: black;
      font-size: .20rem;
    }
    // 通知栏标题
    /deep/ .van-nav-bar__title {
      font-size: .16rem;
    }
  }
  .content {
    // 整体
    .contents {
      height: 100%;
      display: flex;
      flex-direction: column;
      // 计划们
      .Plans {
        flex: 1;
        overflow: auto; // 溢出显示滚动条
        // 单个计划
        .SinglePlans {
          height: 2.40rem;
          width: 3.45rem;
          margin: .10rem auto;
          display: flex;
          flex-direction: column;
          // background-color: aquamarine;
          border-radius: .15rem;
          position: relative;
          // 定位左上角的显示当前状态的显示框
          .State {
            position: absolute;
            top: .05rem;
            left: .10rem;
            opacity: .6;
            border-radius: .06rem;
            line-height: .20rem;
          }
          // 定位到右上角的删除按钮
          .del {
            // height: .30rem;
            position: absolute;
            top: .05rem;
            right: .10rem;
          }
          // 上方图片
          .img {
            height: 1.75rem;
            width: 3.45rem;
            border-radius: .15rem .15rem 0 0;
            overflow: hidden; // 溢出隐藏
            // background-color: crimson;
            img { // 只设置宽不设置高了,只用显示上边可显示的,多余的溢出隐藏掉即可
              width: 100%;
            }
          }
          // 下方文本
          .txt {
            flex: 1;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-radius: 0 0 .15rem .15rem;
            background-color: #eaeaea;
            div {
              width: 50%;
              height: .48rem;
              text-align: center;
              &:nth-of-type(1) {
                border-right: 0.01rem solid #bcbcbc;
              }
            }
          }
        }
        // 编辑目标弹出框
        .target {
          text-align: center;
          width: 3rem;
          height: 1.5rem;
          border-bottom:#fef5cf;
          // @include border-radius(.2rem);
          border-radius: .20rem;
          .targetiup {
            width: 100%;
            height: .35rem;
            border: 0;
            padding: 0 .10rem;
            border-bottom: 1px solid #fff8dc;
          }
          // 用户按钮
            .targetBut {
              position: absolute;
              right: .05rem;
              bottom: .05rem;
              // 确定取消按钮
              .van-button {
                margin-right: .05rem;
                border: 0;
                &:nth-of-type(1) {
                  margin-right: .53rem;
                }
              }
            }
        }
      }
      // 添加计划按钮
      .addplan {
        height: .50rem;
        width: 100%;
      }
    }
  }
  // 设置弹出框中的按钮区域,充满整个弹出框
  /deep/ .van-uploader {
    width: 100%;
    /deep/ .van-uploader__input-wrapper {
      width: 100%;
      // 其中的按钮
      /deep/ .van-button--primary {
        width: 100%;
        background-color: #ffffff;
        border: #ffffff;
        border-radius: .10rem;
        margin-top: 0;
        &:nth-of-type(1) {
          margin-bottom: .03rem;
        }
      }
    }
  }
  // 弹出框中的删除和取消按钮
  /deep/ .van-button {
    height: 0.45rem;
  }
</style>
